import React from 'react';
import ReactDOM from 'react-dom';
import './index1.css';
import App from './05-component/Comment'
//import Hello4 from './05-component/Hello4';

//const title = React.createElement('h1',null,'Hello React')
// const name = 'Jack'
// const dv = (
//   <div>你好,我叫:</div>
// )

/*条件渲染*/
// const isLoading = false
// const loadData = ()=>{
//  return isLoading?(<div>loading...</div>):(<div>数据加载完成，此处显示加载后的数据</div>)
// }
// const title = (
//   //<h1 className="title">Hello JSX,{name}</h1>
//   //<h1 className="title">Hello JSX,<span/></h1>
//   <h1>
//   条件渲染:
//   {loadData()} 
//   </h1>
// )

/*歌曲列表 */
// const songs = [
//   {id:1,name:'song1'},
//   {id:2,name:'song2'},
//   {id:3,name:'song3'}
// ]

// const list = (
//   /*方法一*/
//   <ul className="title" style={{color:'red',background:'skyblue'}}>
//     {songs.map(item => <li key={item.id}>{item.name}</li>)}
//   </ul>
// )
/*函数式组件一*/
// function Hello(){
//   return (
//     <div>函数式组件一</div>
//   )
// }

/*函数式组件二*/
//const Hello = ()=> <div>函数式组件二</div>

/*类组件*/
// class Hello3 extends React.Component{
//   handleClick(){
//     console.log('单击事件被触发')
//   }
//   render(){
//     return (
//       <button onClick={this.handleClick}>Click Me</button>
//     )
//   }
// }

// function Hello3(){
//   function handleClick(){
//     console.log('单击事件被触发')
//   }
//   return(
//     <button onClick={handleClick}>Click Me</button>
//   )
// }

/*state的基本使用*/
// class Hello3 extends React.Component{
//   state= { 
//     count: 0,
//   }

/*事件绑定*/
// constructor(){
//   super()
//   //this.onIncrement = this.onIncrement.bind(this)
// }
  /*事件处理*/
  // onIncrement(){
  //   console.log('事件处理程序中的this:', this)
  //   this.setState({
  //     count: this.state.count + 1
  //   })
  // }
  
  //非绑定函数的事件绑定方法
  // onIncrement = ()=>{
  //   console.log('事件处理程序中的this:', this)
  //   this.setState({
  //     count: this.state.count + 1
  //   })
  // }

//   render(){
//     return (
//       <div>
//         <h1>计数器:{this.state.count}</h1>
//         {/* <button onClick={()=>this.onIncrement()}>+1</button> */}
//         <button onClick={this.onIncrement}>+1</button>

//         {/* <button onClick={()=>{
//           // this.setState({
//           //   count: this.state.count + 1
//           // })
//         }}> +1
//         </button> */}
//       </div>
//     )
//   }
// }

/*受控组件*/
// class App extends React.Component{
//   state = {
//     txt: '',
//     content: '',
//     city: 'bj',
//     isChecked: false
//   }

  // handleChange = e =>{
  //   this.setState({
  //     txt: e.target.value
  //   })
  // }

  // handleContent = e =>{
  //   this.setState({
  //     content: e.target.value
  //   })
  // }

  // handleCity = e =>{
  //   this.setState({
  //     city: e.target.value
  //   })
  // }

  // handleChecked = e =>{
  //   this.setState({
  //     isChecked: e.target.checked
  //   })
  // }

//   handleForm = e =>{
//     //获取当前DOM对象
//     const target = e.target

//     //根据类型获取值
//     const value = target.type === 'checkbox'
//       ? target.checked
//       : target.value

//     //获取name
//     const name = target.name
//     this.setState({
//       [name]:value
//     })  
//   }

//   render(){
//     return (
//       <div>
//         <input type="text" name="txt" value={this.state.txt} onChange={this.handleForm}/><br/>

//         {/*富文本框*/}
//         <textarea name="content" value={this.state.content} oncChange={this.handleForm} cols="" rows=""></textarea><br/>

//        {/* 下拉框*/}
//        <select name="city" value={this.state.city} onChange={this.handleForm}>
//          <option value="sh">上海</option>
//          <option value="bj">北京</option>
//          <option value="gz">广州</option>
//        </select><br/>

//        {/*复选框*/}
//        <input type="checkbox" name="isChecked" isChecked={this.state.isChecked} onChange={this.handleForm}/>
//       </div>
//     )
//   }
// }

/*非受控组件*/
// class App extends React.Component{
//   constructor(){
//     super()

//     //创建ref
//     this.txtRef = React.createRef()
//   }

// //获取文本框的值
// getTxt = () =>{
//   console.log('文本框的值为:', this.txtRef.current.value); 
// }  
// render(){
//   return (
//     <div>
//       <input type="text" ref={this.txtRef}/>
//       <button onClick={this.getTxt}>获取文本框的值</button>
//     </div>
//   )
// }
// } 

ReactDOM.render(
  <App/>, document.getElementById('root')
);
